@extends('mobile.common.main')
@section('container')
<div class="swiper-container swiper-container1">
    <div class="swiper-wrapper">
        <!-- <div class="swiper-slide"><a href="/htmls/m/signup1013.html"><img src="/img/active/m1013.jpg"></a></div> -->
        <!-- <div class="swiper-slide"><img src="/img/m/710/banner0.jpg"></div> -->
        <div class="swiper-slide"><img src="/img/m/710/1111.jpg"><a href="/htmls/m/1111.html" target="_blank"></a></div>
        <div class="swiper-slide"><img src="/img/m/710/banner2.jpg"></div>
        <div class="swiper-slide"><img src="/img/m/710/banner5.jpg"></div>
        <div class="swiper-slide"><img src="/img/m/710/banner3.jpg"><a class="video j_video"><i>&nbsp;</i></a></div>
        <div class="swiper-slide"><img src="/img/m/1023/banner5.jpg"></div>
        <!-- <div class="swiper-slide"><img src="/img/m/710/banner4.jpg"></div> -->
    </div>
    <div class="swiper-pagination" id="swiper-pagination1"></div>
</div>
<div id="video" class="home-video" style="display: none">
    <a class="close j_closeVideo">关闭</a>
    <video id="twVideo" class="video-contain" width="100%" height="100%" preload controls>
        <source src="/uploads/twvcr.mp4" type="video/mp4">
        你的浏览器不支持video标签。
    </video>
</div>
<div class="ty-img">
    <img src="/img/m/1023/index-img1.jpg">
    <div class="img-contain">
        <img src="/img/m/1023/index-img2.jpg">
        <!--<div class="down j_qrcode">
            <div class="qrcode">
                <div class="code cur"><img class="s" src="/img/m/710/icon-iphone-cur.png"><img class="h" src="/img/m/710/icon-iphone-reverse.png"></div>
                <div class="code"><img class="s" src="/img/m/710/icon-android-cur.png"><img class="h" src="/img/m/710/icon-android-reverse.png"></div>
            </div>
            <div class="imgs">
                <img src="/img/m/710/qrcode-iphone-gl.png">
                <img src="/img/m/710/qrcode-android-gl.png">
            </div>
        </div>-->
    </div>
    <img src="/img/m/1023/index-img3.jpg">
    <img src="/img/m/1023/index-img4.jpg">
    <div class="img-contain">
        <img src="/img/m/1023/index-img5.jpg">
        <!--<div class="down j_qrcode">
            <div class="qrcode">
                <div class="code cur"><img class="s" src="/img/m/710/icon-iphone-cur.png"><img class="h" src="/img/m/710/icon-iphone-reverse.png"></div>
                <div class="code"><img class="s" src="/img/m/710/icon-android-cur.png"><img class="h" src="/img/m/710/icon-android-reverse.png"></div>
            </div>
            <div class="imgs">
                <img src="/img/m/710/qrcode-iphone-ty.png">
                <img src="/img/m/710/qrcode-android-ty.png">
            </div>
        </div>-->
    </div>
    <div class="img-contain" style="background-color:#F2F2F2">
        <div class="contain">
            <div class="tit">丰富的产品类型选择<br>让阳光收益惠及千家万户</div>
        </div>
    </div>
    <div style="position:relative;overflow:hidden">
        <div class="swiper-container swiper-container2" style="height: auto">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img style="width: 100%" src="/img/m/710/index-slide1.jpg"><a class="opacity-btn j_buy" data-type="1">立即订购</a></div>
                <div class="swiper-slide"><img style="width: 100%" src="/img/m/710/index-slide2.jpg"><a class="opacity-btn j_buy" data-type="2">立即订购</a></div>
                <div class="swiper-slide"><img style="width: 100%" src="/img/m/710/index-slide3.jpg"><a class="opacity-btn j_buy" data-type="2">立即订购</a></div>
                <div class="swiper-slide"><img style="width: 100%" src="/img/m/710/index-slide4.jpg"><a class="opacity-btn j_buy" data-type="2">立即订购</a></div>
            </div>
            <div class="swiper-pagination" id="swiper-pagination2"></div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
    </div>
    <div class="img-contain">
        <div class="contain">
            <div class="tit">碳银极光 把户用光伏做到极致</div>
        </div>
    </div>
    <img src="/img/m/710/index-img7.jpg">
    <div class="img-contain">
        <div class="contain">
            <div class="tit">碳银的数字经济模式<br>一直受到各界的高度关注与重视</div>
        </div>
    </div>
    <div style="position:relative;padding-bottom:.5rem;overflow:hidden">
        <div class="swiper-container swiper-container3" style="height: auto">
            <div class="swiper-wrapper swiper-wrapper3">
                <div class="swiper-slide">
                    <div class="item">
                        <div class="img">
                            <img src="/ace/img/img-layer6_3.jpg" alt="重庆市高新区管委会副主任赵文明调研碳银">
                        </div>
                        <div class="tit">重庆市高新区管委会副主任赵文明调研碳银</div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="item">
                        <div class="img">
                            <img src="/ace/img/img-layer6_4.jpg" alt="杭州市委常委、萧山区委书记俞东来考察碳银">
                        </div>
                        <div class="tit">杭州市委常委、萧山区委书记俞东来考察碳银</div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="item">
                        <div class="img">
                            <img src="/ace/img/img-layer6_5.jpg" alt="杭州市政协副主席张鸿建莅临碳银指导">
                        </div>
                        <div class="tit">杭州市政协副主席张鸿建莅临碳银指导</div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="item">
                        <div class="img">
                            <img src="/ace/img/img-layer6_6.jpg" alt="萧山区委副书记、区长王敏莅临碳银">
                        </div>
                        <div class="tit">萧山区委副书记、区长王敏莅临碳银</div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="item">
                        <div class="img">
                            <img src="/ace/img/img-layer6_9.jpg" alt="中国工程院院士曲久辉在碳银主办的水环境产业发展研讨会发言">
                        </div>
                        <div class="tit">中国工程院院士曲久辉在碳银主办的水环境产业发展研讨会发言</div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="item">
                        <div class="img">
                            <img src="/ace/img/img-layer6_10.jpg" alt="中国工程院院士蹇锡高在废旧轮胎资源化利用签约仪式上发言">
                        </div>
                        <div class="tit">中国工程院院士蹇锡高在废旧轮胎资源化利用签约仪式上发言</div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="item">
                        <div class="img">
                            <img src="/ace/img/img-layer6_11.jpg" alt="北京大学经济学教授何帆主持水环境产业研讨会沙龙">
                        </div>
                        <div class="tit">北京大学经济学教授何帆主持水环境产业研讨会沙龙</div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="item">
                        <div class="img">
                            <img src="/ace/img/img-layer6_12.jpg" alt="杭州市萧山区衙前低碳小镇建设项目">
                        </div>
                        <div class="tit">杭州市萧山区衙前低碳小镇建设项目</div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="item">
                        <div class="img">
                            <img src="/ace/img/img-layer6_13.jpg" alt="龙游废旧轮胎资源化利用项目签约">
                        </div>
                        <div class="tit">龙游废旧轮胎资源化利用项目签约</div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="item">
                        <div class="img">
                            <img src="/ace/img/img-layer6_14.jpg" alt="湖北黄州水环境综合治理项目签约">
                        </div>
                        <div class="tit">湖北黄州水环境综合治理项目签约</div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="item">
                        <div class="img">
                            <img src="/ace/img/img-layer6_15.jpg" alt="碳银与行业龙头隆基乐叶签约">
                        </div>
                        <div class="tit">碳银与行业龙头隆基乐叶签约</div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="item">
                        <div class="img">
                            <img src="/ace/img/img-layer6_16.jpg" alt="碳银与央企中建中环签约">
                        </div>
                        <div class="tit">碳银与央企中建中环签约</div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="item">
                        <div class="img">
                            <img src="/ace/img/img-layer6_17.jpg" alt="钱江世纪城党工委书记、管委会主任黄国钧莅临碳银指导">
                        </div>
                        <div class="tit">钱江世纪城党工委书记、管委会主任黄国钧莅临碳银指导</div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="item">
                        <div class="img">
                            <img src="/ace/img/img-layer6_18.jpg" alt="萧山区副区长魏大庆一行莅临碳银网">
                        </div>
                        <div class="tit">萧山区副区长魏大庆一行莅临碳银网</div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="item">
                        <div class="img">
                            <img src="/ace/img/img-layer6_19.jpg" alt="碳银与重庆高新区能源环保项目签约">
                        </div>
                        <div class="tit">碳银与重庆高新区能源环保项目签约</div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="item">
                        <div class="img">
                            <img src="/ace/img/img-layer6_1.jpg" alt="国家发改委应对气候变化司李高司长莅临碳银">
                        </div>
                        <div class="tit">国家发改委应对气候变化司李高司长莅临碳银</div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="item">
                        <div class="img">
                            <img src="/ace/img/img-layer6_2.jpg" alt="杭州市市长张鸿铭见证碳银平台上线">
                        </div>
                        <div class="tit">杭州市市长张鸿铭见证碳银平台上线</div>
                    </div>
                </div>
            </div>
            <div class="swiper-pagination" id="swiper-pagination3"></div>
        </div>
    </div>
</div>
<div class="pop j_pop" id="j_pop1">
    <div class="pop-bg j_bg"></div>
    <div class="pop-qrcode pop-form">
        <div class="close j_close"></div>
        <div class="tit">资料填写</div>
        <div class="form">
            <div class="item">
                <input type="text" id="partner_name" class="text" maxlength="10" placeholder="姓名">
            </div>
            <div class="item">
                <input type="tel" id="partner_phone" class="text" maxlength="11" placeholder="电话">
            </div>
            <div class="item">
                <input type="text" id="address" class="text" maxlength="100" placeholder="房屋地址">
            </div>
            <div class="item">
                <a class="btn" id="j_applySubmit">确认提交</a>
            </div>
        </div>
    </div>
</div>
<div class="pop j_pop" id="j_pop2">
    <div class="pop-bg j_bg"></div>
    <div class="pop-qrcode pop-error">
        <div class="close j_close"></div>
        <div class="icon"></div>
        <div class="tit">敬请期待，暂时不支持线上订购</div>
    </div>
</div>
@endsection
@section('script')
<script>
    (function ($) {
        $.toast = function (options) {
            var $toast = $('#toast');
            var defaults = {
                msg: '', call: function () {
                    $toast.fadeOut(500);
                }
            };
            try {
                if (typeof options === "string" || typeof options === "number") {
                    options = {msg: options};
                }
                var opts = $.extend(defaults, options);
            } catch (e) {
                console.log(e);
            }

            var toastHtml = '<div style="position:fixed;z-index:1000;top:0;right:0;left:0;bottom:0;"></div>' +
                '<div style="position:fixed;z-index:5000;width:60%;top:4rem;left:50%;margin-left:-30%;background:rgba(17,17,17,.7);text-align:center;border-radius:.1rem;color:#FFF;"><p style="padding:.4rem;line-height:1;font-size:.3rem">' + opts.msg + '</p></div>';
            if ($toast && $toast.length > 0) {
                $toast.html(toastHtml);
            } else {
                $('body').append('<div id="toast" style="position:relative;z-index:9000">' + toastHtml + '</div>');
                $toast = $('#toast');
            }
            $toast.fadeIn(500);
            setTimeout(function () {
                opts.call();
            }, 2000);
        };
    })(Zepto);
    (function ($) {
        $(function () {
            new Swiper('.swiper-container1', {
                autoplay: {
                    delay: 3000,
                    disableOnInteraction: false
                },
                loop: true,
                pagination: {
                    clickable: true,
                    el: '#swiper-pagination1'
                }
            });

            new Swiper('.swiper-container2', {
                slidesPerView: 1,
                loop: true,
                pagination: {
                    clickable: true,
                    el: '#swiper-pagination2'
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev'
                }
            });

            new Swiper('.swiper-container3', {
                autoplay: {
                    delay: 2000,
                    disableOnInteraction: false
                },
                loop: true,
                pagination: {
                    clickable: true,
                    el: '#swiper-pagination3'
                }
            });
            $('.j_video').on('click', function () {
                $('#video').css('display', 'block');
            });
            $('.j_closeVideo').on('click', function () {
                $('#video').css('display', 'none');
                //暂停播放
                $('#twVideo')[0].pause();
            });
            //二维码切换
            $('.j_qrcode .code').on('click', function () {
                var $t = $(this);
                var $p = $t.parents('.j_qrcode');
                if (!$t.hasClass('cur')) {
                    $p.find('.code.cur').removeClass('cur');
                    $t.addClass('cur');
                    $p.find('.imgs > img').eq(0).toggle(0);
                }
            });
            //立即订购
            $(".j_buy").on("click", function () {
                var type = $(this).attr('data-type');
                $("#j_pop" + type).fadeIn(200);
            });
            $(".j_close,.j_bg").on("click", function () {
                $(this).parents(".j_pop").fadeOut(200)
            });
            //确认提交
            var $partner_name = $('#partner_name');
            var $partner_phone = $('#partner_phone');
            var $address = $('#address');
            $('#j_applySubmit').on('click', function () {
                if (!$partner_name.val()) {
                    $.toast('请输入姓名');
                    return false;
                }
                var reg;
                if (!$partner_phone.val()) {
                    $.toast('请输入电话');
                    return false;
                } else {
                    reg = /^0?(13|14|15|17|18)[0-9]{9}$/;
                    if (!reg.test($partner_phone.val())) {
                        $.toast({
                            msg: '联系手机格式错误', call: function () {
                                $('#toast').fadeOut(500);
                                $partner_phone.focus();
                            }
                        });
                        return false;
                    }
                }
                if (!$address.val()) {
                    $.toast('请输入房屋地址');
                    return false;
                }
                var paras = {};
                paras['partner_name'] = $partner_name.val();
                paras['partner_phone'] = $partner_phone.val();
                paras['address'] = $address.val();
                paras['type'] = 3;
                var $t = $(this);
                if (!$t.hasClass('dis')) {
                    $t.addClass('dis');
                    $.ajax({
                        url: 'http://api.crm.tanwin.cn/project/partner/join/us',
                        data: paras,
                        type: "POST",
                        dataType: "json",
                        async: false,
                        success: function (data) {
                            $t.removeClass('dis');
                            if (data && data.code === 100) {
                                $.toast('提交成功！我们的客服将尽快与您联系，敬请关注！', function () {
                                    $('#partner_name,#partner_phone,#address').val('');
                                    $('.j_pop').fadeOut(200);
                                });
                            } else {
                                $.toast(data.msg);
                            }
                        },
                        error: function () {
                            $t.removeClass('dis');
                        }
                    });
                }
            });
        });
    })(Zepto);
</script>
@endsection
